<template>
	<div class="list-box">
		<div class="pannel-title pannel-between">
			<div>网站信息管理</div>
		</div>
		<div class="line"></div>
		<a-spin :spinning="spinning">
			<div class="data-table">
				<div class="pannel-form">
					<a-form ref="form1" :model="formState" :rules="rules" :labelCol="{ span: 6, offset: 0 }">
						<a-form-item label="网站标题" name="title">
							<a-input v-model:value="formState.title" placeholder="请输入网站标题" />
						</a-form-item>
						<a-form-item label="网站说明" name="description">
							<a-textarea v-model:value="formState.description" placeholder="请输入网站说明" :auto-size="{ minRows: 2, maxRows: 5 }" />
						</a-form-item>
						<a-form-item label="网站关键字" name="keywords">
							<a-textarea v-model:value="formState.keywords" placeholder="请输入网站关键字，使用半角‘;’符号分开" :auto-size="{ minRows: 2, maxRows: 5 }" />
						</a-form-item>
						<a-form-item label="网站logo" name="logo">
							<avatar-upload v-model:value="formState.logo"></avatar-upload>
						</a-form-item>
						<a-form-item label="登录&注册页面logo" name="signPageLogo">
							<avatar-upload v-model:value="formState.signPageLogo"></avatar-upload>
						</a-form-item>
						<a-form-item label="登录&注册页面图" name="signPageBanner">
							<avatar-upload v-model:value="formState.signPageBanner"></avatar-upload>
						</a-form-item>
						<a-form-item label="站长统计代码" name="statisticsCode">
							<a-textarea v-model:value="formState.statisticsCode" placeholder="请输入站长统计代码" :auto-size="{ minRows: 2, maxRows: 5 }" />
						</a-form-item>
						<a-form-item label="网站版本" name="webVer">
							<a-input v-model:value="formState.webVer" placeholder="请输入网站版本" />
						</a-form-item>
						<a-form-item label="网站版权信息" name="copyright">
							<a-input v-model:value="formState.copyright" placeholder="请输入网站版权信息" />
						</a-form-item>
						<a-form-item label="访问模式" name="visitMode">
							<a-radio-group name="visitMode" v-model:value="formState.visitMode">
								<a-radio value="Guest">游客模式</a-radio>
								<a-radio value="Member">会员模式</a-radio>
							</a-radio-group>
						</a-form-item>
						<a-form-item label="捐赠二维码(支付宝)" name="donateQr1">
							<avatar-upload v-model:value="formState.donateQr1"></avatar-upload>
						</a-form-item>
						<a-form-item label="捐赠二维码(微信)" name="donateQr2">
							<avatar-upload v-model:value="formState.donateQr2"></avatar-upload>
						</a-form-item>
						<a-form-item label="支持用户邀请码注册" name="inviteCodeFlag">
							<a-radio-group name="inviteCodeFlag" v-model:value="formState.inviteCodeFlag">
								<a-radio value="Y">支持</a-radio>
								<a-radio value="N">不支持</a-radio>
							</a-radio-group>
						</a-form-item>
						<a-form-item label="支持对象存储OSS" name="useOssFlag">
							<a-radio-group name="useOssFlag" v-model:value="formState.useOssFlag">
								<a-radio value="Y">支持</a-radio>
								<a-radio value="N">不支持</a-radio>
							</a-radio-group>
						</a-form-item>
					</a-form>
				</div>
				<div class="pannel-form-btn">
					<a-button :loading="btnLoading" type="primary" shape="round" @click="confirm()">保存</a-button>
				</div>
			</div>
		</a-spin>
		<div style="height:400px;"></div>
	</div>
</template>
<script>
import { useStore } from "vuex";
import { ref } from "@vue/reactivity";
import { message, Button, Form, Input, Radio,Spin } from "ant-design-vue";
import httpRequest from "@/util/httpRequest";
import avatarUpload from "@/components/avatarUpload";
import baseUtil from "@/util/baseUtil";
export default {
	components: {
		AButton: Button,
		AForm: Form,
		AFormItem: Form.Item,
		AInput: Input,
		ATextarea: Input.TextArea,
		ARadio: Radio,
		ARadioGroup: Radio.Group,
		ASpin:Spin,
		avatarUpload,
	},
	setup() {
		const store = useStore();
		//text：页面头部面包屑的显示文字，isBack：是否显示页面头部返回按钮
		store.dispatch("setBreadcrumb", {
			text: "在线工具 / 现在工具分类管理",
			isBack: false,
		});
		const formState = ref({
			logo: "", // 网站logo
			sign_pageLogo: "", // 登录&注册页面logo
			sign_pageBanner: "", // 登录&注册页面图
			statisticsCode: "", // 站长统计代码
			title: "", // 网站标题
			description: "", // 网站说明
			keywords: "", // 网站关键字
			webVer: "", // 网站版本
			copyright: "", // 网站版权信息
			icpNo: "", // 网站备案号
			donateQr1: "", // 捐赠二维码1(Alipay)
			donateQr2: "", // 捐赠二维码2(Wechatpay)
			visit_mode: "", // 访问模式: Guest游客模式,Member会员模式
			inviteCodeFlag: "", // 支持用户邀请码注册: Y支持, N否
			useOssFlag: "", // 支持对象存储 OSS: Y是,N否
		});
		return {
			formState,
			btnLoading: ref(false),
			spinning:ref(false),
			content:ref(""),
			rules:ref([]),
			text:ref(''),
			toolbarsExclude:ref(['revoke','next', 'save','htmlPreview','github'])
		};
	},
	data() {
		return {};
	},
	mounted() {
		this.spinning = true;
		httpRequest.post("获取网站环境", { id: this.$route.query.id }).then((res) => {
			this.formState = { ...baseUtil.LineToHump(res.data) };
			console.log(this.formState);
		}).finally(()=>{
			this.spinning = false;
		});
	},
	methods: {
		confirm() {
			console.log(this.text);
			if(this.text){
				return;
			}
			this.$refs.form1.validate().then(() => {
				this.btnLoading = true;
				httpRequest
					.post("编辑网站环境", this.formState)
					.then(() => {
						message.success("保存成功"); 
					})
					.finally(() => {
						this.btnLoading = false;
					});
			});
		},
		onEditorChange(e){
			console.log(e);
		}
	},
};
</script>
<style lang="less" scoped>
.line {
	width: 100%;
	margin: 20px 0;
	border-top: 1px solid #eee;
}
</style>
